<template>
  <n-row class="demo-nest" :gutter="0">
    <n-col :span="14">
      <fs-crud ref="crudRef" v-bind="crudBinding">
        <template #form-body-bottom>
          <n-card title="权限">
              <n-tree
                block-line
                cascade
                checkable
                selectable
                multiple
                :virtual-scroll="true"
                :data="treeData"
                :default-checked-keys="checkedKeys"
                key-field="id"
                label-field="name"
                style="max-height: 550px; overflow: hidden"
                @update:checked-keys="selectedTree"
              />
            </n-card>
        </template>
      </fs-crud>
    </n-col>
    <n-col :span="9" style="padding-left:10px;">
      <aside-table ref="asideTableRef" />
    </n-col>
  </n-row>
</template>

<script>
  import { ref, unref, defineComponent, onMounted } from 'vue';
  import createCrudOptions from './crud';
  import { useExpose, useCrud } from '@fast-crud/fast-crud';
  import AsideTable from './aside-table/index.vue';
  import { getMenuList } from '@/api/system/menu';
  import { getTreeItem } from '@/utils';
  export default defineComponent({
    name: 'RoleTable',
    // eslint-disable-next-line vue/no-unused-components
    components: { AsideTable },
    setup() {
      const checkedKeys = ref([]);   
      const treeData = ref([]);  
      
      // crud组件的ref
      const crudRef = ref();
      // crud 配置的ref
      const crudBinding = ref();
      // 暴露的方法
      const { expose } = useExpose({ crudRef, crudBinding });
      // 你的crud配置
      const asideTableRef = ref();
      const { crudOptions } = createCrudOptions({ expose, asideTableRef,checkedKeys });
      const { resetCrudOptions } = useCrud({ expose, crudOptions });
      
      onMounted(async () => {
        expose.doRefresh();
        const treeMenuList = await getMenuList();
        treeData.value = treeMenuList;
      });
      
      function selectedTree(keys) {
        checkedKeys.value = keys;
      }

      return {
        crudBinding,
        crudRef,
        asideTableRef,
        treeData,
        checkedKeys,
        selectedTree
      };
    },
  });
 
</script>
<style lang="less">
  .demo-nest {
    height: 100%;
    width: 100%;
  }
</style>
